<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
<!--    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>-->
<!--    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>-->
    <!-- 引入 Pyecharts 以及 Liquid Chart 组件的依赖库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pyecharts@1.9.0/dist/pyecharts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@2.1.0/echarts-liquidfill.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/pyecharts@1.9.0/dist/pyecharts.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/main.css" type="text/css">
</head>
<body>
<div class="title">
    <span>天气查询:</span>
    <input placeholder="请输入城市" type="text" id="city">
    <button id="getdata">搜索</button>
</div>
<!--<div id="a" style="width:1000px; height:600px;"></div>-->
<div id="a"></div>
<!--    <div id="chartContainer">-->
<!--        <iframe src="{{ url_for('static', filename='page.html') }}" width="100%"  frameborder="0"></iframe>-->
<!--    </div>-->
<script>
    $("#getdata").click(function () {
            let city = $("#city").val()
            if (city === '') {
                alert('输入错误，请重新输入')
                return;
            }
            echarts.init(document.getElementById('a'), 'white', {renderer: 'canvas'})
            // let chart = echarts.init(document.getElementById('a'), 'white', {renderer: 'canvas'})
            $.ajax({
                type: "GET",
                url: "/getdata",
                // dataType: 'json/text',
                data: {'city': city},
                success: function (result) {
                    // chart.setOption(result)
                    $('#a').html(result);
                    // // 将获取到的页面插入到指定的容器中
                    // var chartContainer = document.getElementById('a');
                    // chartContainer.innerHTML = result;

                },
                error: function (result) {
                    alert('输入的城市不存在，请重新输入!')
                }
            })
        }
    )
</script>
</body>
</html>